<template>
	<list style="width: 500rpx;height: 400rpx;overflow: hidden;" :show-scrollbar="false" :bounce="false">
		<cell class="flex  align-center px-3 pt-3" v-for="(item,index) in gifts" :key="index"
			insert-animation="default" delete-animation="default" :ref="'item'+index">
			<view class="flex rounded-circle flex-row gift">
				<view class="p">
					<image class="rounded-circle personImg" :src="'http://39.103.173.215:89'+item.avatar||defaultAvatar"></image>
				</view>
				<view class="flex-1 flex flex-column justify-center">
					<text class="text-white font-sm">{{item.name}}</text>
					<text class="text-white font-sm">送{{item.gift_name}}</text>
				</view>
				<view class="rounded-circle flex align-center justify-center">
					<image class="rounded-circle personImg" :src="item.gift_image"></image>
				</view>
			</view>
			<text class="text-warning font flex align-center ml-2">X {{item.num}}</text>
		</cell>
	</list>

</template>

<script>
	import $C from '@/common/config.js';
	const dom = weex.requireModule('dom')
	export default {
		data() {
			return {
				//默认头像
				defaultAvatar: '/static/tabbar/1.PNG',
				gifts: []
			}
		},
		created() {
			
		},
		methods: {
			send(gift){
				this.gifts.push(gift)
				this.toBottom()
				this.autoHide()
			},
			//礼物滚到底部
			toBottom() {
				this.$nextTick(function() {
					let index = this.gifts.length - 1
					let ref = 'item' + index
					if (this.$refs[ref]) {
						dom.scrollToElement(this.$refs[ref][0], {})
					}
				})
			},
			autoHide(){
				if(this.gifts.length){
					let timer = setTimeout(()=>{
						this.gifts.splice(0,1)
					},7000)
				}
			}
		}
	}
</script>

<style>
	.personImg {
		height: 70rpx;
		width: 70rpx;
	}

	.right-icon {
		width: 70rpx;
		height: 70rpx;
	}

	.gift {
		width: 325rpx;
		background-image: linear-gradient(to right, #BCABB1, #65AAF0);
	}
</style>
